<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>basic</title>
    <script src="js/three.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="WebGL-output"></div>
</body>
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
    var renderer = new THREE.WebGLRenderer()
    renderer.setClearColor(0xEEEEEE)
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.shadowMap.enabled = true

    var axes = new THREE.AxisHelper(20)
    scene.add(axes)

    var planeGeometry = new THREE.PlaneGeometry(60, 20)
    var planeMeterial = new THREE.MeshLambertMaterial({color: 0xffffff})

    var plane = new THREE.Mesh(planeGeometry, planeMeterial)

    plane.rotation.x = -0.5 * Math.PI
    plane.receiveShadow = true;
    plane.position.set(15, 0, 0)

    scene.add(plane)

    var cubeGeometry = new THREE.CubeGeometry(4, 4, 4)
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000})
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
    cube.position.set(-4, 3, 0)
    cube.castShadow = true
    scene.add(cube)

    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20)
    var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff})
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
    sphere.castShadow = true
    sphere.position.set(20, 4, 2)
    scene.add(sphere)

    var spotLight = new THREE.SpotLight(0xffffff)
    spotLight.position.set(-40, 60, 10)
    spotLight.castShadow = true;
    scene.add(spotLight)

    camera.position.set(-30, 40, 30)
    camera.lookAt(scene.position)

    document.getElementById('WebGL-output').appendChild(renderer.domElement)
    renderer.render(scene, camera)
</script>
</html>